<template>
	<view>
		<view class="tablist">
			<view class="tab_item">
				<view class="title">类型</view>
				<view class="item_r">
					<view class="it" :class="data.queryParams.type ? '' : 'itactive'" @click="handleFilter('type', '全部')">全部</view>
					<view
						class="it"
						:class="data.queryParams.type == item.name ? 'itactive' : ''"
						v-for="(item, index) in data.typeList"
						:key="index"
						@click="handleFilter('type', item.name)"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
		<!-- 	<view class="tab_item">
				<view class="title">方式</view>
				<view class="item_r">
					<view
						class="it"
						:class="data.queryParams.lineType == item.value ? 'itactive' : ''"
						v-for="(item, index) in data.typeList1"
						:key="index"
						@click="handleFilter('lineType', item.value)"
					>
						{{ item.name }}
					</view>
				</view>
			</view> -->
			<view class="tab_item">
				<view class="title">来源</view>
				<view class="item_r">
					<view
						class="it"
						:class="data.queryParams.source == item.value ? 'itactive' : ''"
						v-for="(item, index) in data.typeList2"
						:key="index"
						@click="handleFilter('source', item.value)"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<loadstatusVue :status="data.loadStatus">
			<view class="content">
				<view class="c_item" v-for="(item, index) in data.list" :key="index" @click="goActivity(item)">
					<view class="">
						<image :src="item.imgFace" mode="aspectFill"></image>
					</view>
					<view class="tss">{{ item.name }}</view>
				</view>
			</view>
		</loadstatusVue>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getTypeAll, getTemplateList } from '@/api/activity.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
const data = reactive({
	typeList: [],
	typeList1: [
		{
			name: '线上活动',
			value: 1
		},
		{
			name: '线下活动',
			value: 2
		}
	],
	typeList2: [
		{
			name: '公共模板库',
			value: 0
		},
		{
			name: '分社模板库',
			value: 1
		}
	],
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		type: '',
		lineType: undefined,
		source: 0,
		pageNum: 1,
		pageSize: 10
	}
});
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 统一处理筛选变更
const handleFilter = (key, value) => {
	if (data.queryParams[key] === value) return; // 避免重复点击
	data.queryParams[key] = value;
	if (value == '全部') {
		data.queryParams[key] = '';
	}
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};

// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await getTemplateList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
// 上拉加载更多
onReachBottom(() => {
	console.log('上拉加载更多', data.hasMore, data.loadStatus);
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
});
onLoad(() => {
	getList();
	getTypeAll({}).then((res) => {
		if (res.code == 200) {
			data.typeList = res.data;
		}
	});
});

const goActivity = (item) => {
	uni.navigateTo({
		url:`/mypage/activity/waitconfirmed?id=${item.id}`
	});
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.tablist {
	width: 710rpx;
	margin: 30rpx auto 10rpx;
	.tab_item {
		display: flex;
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #75613e;
		}
		.item_r {
			margin-left: 24rpx;
			flex: 1;
			.it {
				display: inline-block;
				height: 48rpx;
				background: #eeeeee;
				border-radius: 8rpx;
				padding: 0rpx 20rpx;
				line-height: 48rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8f8f8b;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
			}
			.itactive {
				color: #75613e;
				background: #eee8d8;
			}
			.it:nth-child(4n) {
				margin-right: 0rpx;
			}
		}
	}
}
.content {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 0rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	.c_item {
		width: 210rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		image {
			width: 210rpx;
			height: 300rpx;
			border-radius: 12rpx;
		}
		.tss {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #75613e;
			margin-top: 15rpx;
		}
	}
	.c_item:nth-child(3n) {
		margin: 0;
	}
}
</style>
